<template>
  <SuperTable :data-request="fetchData" :columns="columns" header-title="样本类型管理" pager align="center" border search ref="superTableRef" :export-config="{}">
    <template #action>
      <Button type="primary" @click="showEditDrawerFn(null)">新增样本类型</Button>
    </template>
  </SuperTable>

  <Drawer v-model:visible="state.showEditDrawer" width="600" :closable="false">
    <!--   标题   -->
    <template #title>
      <HeaderTitle :title="`${state.currentTitle}样本类型`" />
    </template>
    <!--   右上按钮   -->
    <template #extra> <CloseOutlined @click="editDrawerCancelFn" /></template>
    <!--   底部按钮   -->
    <template #footer>
      <Space style="display: flex; justify-content: center" size="large">
        <Button @click="editDrawerCancelFn">取消</Button>
        <Button type="primary" @click="editDrawerOkFn">保存</Button>
      </Space>
    </template>
    <!--   主体内容   -->
    <Form ref="formRef" :model="state.formData" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
      <FormItem label="分类方法" name="classify" :required="true">
        <Input v-model:value="state.formData.classify" />
      </FormItem>

      <FormItem label="是否启用" name="status" :required="true">
        <RadioGroup v-model:value="state.formData.status" name="radioGroup">
          <Radio :value="1">是</Radio>
          <Radio :value="0">否</Radio>
        </RadioGroup>
      </FormItem>

      <FormItem label="样本类型" :required="true">
        <div v-for="(item, index) in state.formData.sampleTypeList" :key="index" style="margin-bottom: 20px; position: relative">
          <Input v-model:value="state.formData.sampleTypeList[index]" />
          <CloseCircleTwoTone v-show="state.formData.sampleTypeList?.length - 1 !== index" style="position: absolute; top: -6px; right: -6px" twoToneColor="#f9b1b9" @click="delSampleTypeFn(index)" />
        </div>
        <Row justify="center">
          <PlusCircleTwoTone style="font-size: 20px" @click="addSampleTypeFn" />
        </Row>
      </FormItem>
    </Form>
  </Drawer>
</template>
<script setup lang="tsx">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import { VxeGridPropTypes } from 'vxe-table';
import { reactive, ref } from 'vue';
import HeaderTitle from '@/components/headerTitle.vue';
import { baseColumns, TableColumnItem } from './columns';
import { message, Drawer, Form, FormItem, RadioGroup, Radio, Row, FormInstance, Space, Input } from 'ant-design-vue';
import Button from '@/framework/components/basic/button/button.vue';
import { CloseOutlined, PlusCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons-vue';
import { addSampleType, getSampleType, updateSampleType } from '@/modules/sample_manage/api/sample-type-management';

/**
 * data
 */
const state: { showEditDrawer: boolean; formData: any; currentTitle: '新建' | '编辑' } = reactive({
  showEditDrawer: false,
  formData: { sampleTypeList: [''] },
  currentTitle: '新建',
});

/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
let columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '操作',
    field: '$action',
    width: 150,
    actions: ({ row }) => [
      {
        label: '编辑',
        onClick: async () => {
          showEditDrawerFn(row);
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let queryData = superTableRef.value?.getFormModel();
  let params = {
    ...queryData,
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    'orderBy[0].field': 'createTime', // 默认排序字段
    'orderBy[0].order': 'desc', // 默认排序方式
  };
  const { result } = await getSampleType(params);
  return result;
};

/**
 * form
 */
const formRef = ref<FormInstance>();
const rules = {
  classify: [
    {
      required: true,
      message: '该项必填',
    },
  ],
  status: [
    {
      required: true,
      message: '该项必填',
    },
  ],
};
const addSampleTypeFn = () => {
  state.formData.sampleTypeList?.push('');
};
const delSampleTypeFn = (index) => {
  state.formData.sampleTypeList?.splice(index, 1);
};

/**
 * drawer
 */
const showEditDrawerFn = (data) => {
  state.formData = data ? { ...data, sampleTypeList: data.value?.split('|') } : { sampleTypeList: [''] };
  state.currentTitle = data ? '编辑' : '新建';
  state.showEditDrawer = true;
};
const editDrawerCancelFn = () => {
  state.showEditDrawer = false;
};
const editDrawerOkFn = async () => {
  await formRef.value?.validateFields();
  if (state.formData.sampleTypeList?.some((item) => !item)) {
    return message.warn('样本类型不能为空！');
  }

  let params: any = {
    classify: state.formData.classify,
    status: state.formData.status,
    value: state.formData.sampleTypeList?.join('|'),
  };

  if (state.currentTitle === '编辑') {
    await updateSampleType(state.formData.id, params);
  } else {
    await addSampleType(params);
  }

  message.success('保存成功！');
  superTableRef.value?.refreshTable();
  editDrawerCancelFn();
};
</script>
<style scoped lang="less"></style>
